<template>
  <div>
    <div ref="pieChartData" class="pie"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/core';
  import {
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
  } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { LabelLayout } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    // TitleComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ]);

  export default {
    name: "PieChartData",
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
    },
    components: {

    },
    data() {
      return {
        valueList: [],
        option: {
          title: {
            text: '品类销售占比',
            left: 10,
            top: 10,
            textStyle: {
              color: 'white'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + " " + +params.percent + " %"
            }
          },
          animation: false,
          series: [
            {
              name: '平台各品类销售占比',
              type: 'pie',
              radius: [32, 64],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              data: [],
              label: {
                show: true,
                formatter: function (params) {
                  if (params.name == "普洱茶") {
                    return params.name + "\n" + +params.percent + "%"
                  } else {
                    return params.name + "" + +params.percent + "%"
                  }
                },
                color: 'white',
                fontStyle: 'normal',
                fontSize: 13
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              labelLine: {
                length: 6,
                length2: 5
              },
              left: -40,
              top: 35
            }
          ]
        }
      }
    },
    computed: {

    },
    watch: {
      dataList(val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
    methods: {
      init() {
        this.handleList()
        this.option.series[0].data = this.valueList

        var chartDom = this.$refs.pieChartData;
        var myChart = echarts.init(chartDom);
        myChart.setOption(this.option)
      },
      handleList() {
      if (this.dataList && this.dataList.length > 0) {
        this.valueList = []

        for (let index = 0; index < this.dataList.length; index++) {
          const element = this.dataList[index];
          var item = {}
          item.name = element.name
          item.value = element.amount
          this.valueList.push(item)
        }
      }
    }
    },
    created() {
      
    },
    mounted() {
      
    },
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>

<style lang='scss' scoped>
  .pie {
    // margin-left: 10px;
    width: 350px;
    height: 272px;
  }
</style>